<template>
  <footer >
        <span class="foot" v-for="(item,index) in arr2" @click="handleClick(index)" :style="{color:currentIndex==index?'red':'' }" :key="index">{{item}}</span>
    </footer>
</template>

<script>
export default {
    
    data() {
        return {
        currentIndex:0,
        arr2:["首页","爆爆团","订单","我的"], 
        
        handleClick(index){
            this.currentIndex = index;
        
    }
    }
        
    }
    
}
</script>

<style lang="scss" scoped>
    footer{
            width: 100%;
            text-align: center;
            position: fixed;
            bottom: 0;
            display: flex;
            justify-content: space-between;
            border: 1px solid #f5f5f5;
            height: 40px;
            background: white;

        }
        footer .foot{
            width: 25%;
        }
</style>